<template>
	<view class="page ex-mall-tab-page" :class="[$themeClass('page-another-bg-color')]">
		<!-- 头部 -->
		<view class="ex-mall-header" :class="[$themeClass('header-bg-color')]">
			<!-- #ifdef MP-WEIXIN -->
			<view class="ex-mall-header-mp-weixin-fill" :class="[$themeClass('header-title-color')]">【 🚚 个人中心】</view>
			<!-- #endif -->
      <view class="ex-mall-header-content">
        <!-- header左边占位 -->
        <view class="ex-mall-header-left">
          <view class="ex-mall-header-btn">
            <text class="ex-mall-header-btn-icon"></text>
          </view>
        </view>
        <view class="ex-mall-header-right">
          <view class="ex-mall-header-btn" v-if="userInfo && userInfo.name" :class="[$themeClass('header-btn-left-further-bg-color')]">
            <text class="ex-mall-header-btn-icon" style="font-size: 14px;" :class="[$themeClass('header-btn-left-icon-further-color')]" @click="logout">退出</text>
          </view>
        </view>
      </view>
		</view>

		<view class="top" :class="[$themeClass('header-bg-color'), $themeClass('header-title-color')]">
			<view class="avatar">
				<image class="img" :src="userInfo.avatar && userInfo.avatar !== '' ? userInfo.avatar : defaultAvatar" ></image>
			</view>
      <view class="name">{{ userInfo.name ? userInfo.name : '' }}</view>
      <view style="width: 20%;" v-if="Object.keys(userInfo).length === 0 || userInfo === ''" class="ex-mall-header-search-btn" @click="toLogin" :class="[$themeClass('search-btn-bg-color'), $themeClass('search-btn-color')]">
        <text class="ex-mall-header-btn-icon" style="font-size: 14px;" :class="[$themeClass('header-btn-left-icon-further-color')]">登  录</text>
      </view><!--      <view class="label" v-else @click="toLogin">修改资料</view>-->
		</view>

		<view class="content">
			<view class="list">
				<view class="item" v-if="authority !== 'business'" :class="[$themeClass('list-item-bg-color')]" @click="toOrder">
					<view class="left">
						<view class="icon-box">
							<text class="icon ri-file-list-2-line"></text>
						</view>
						<view class="title">我的预约</view>
					</view>
					<view class="right">
						<view class="arrow">
							<text class="icon ri-arrow-right-s-line"></text>
						</view>
					</view>
				</view>
        <view class="item" :class="[$themeClass('list-item-bg-color')]" @click="toResetPassword">
          <view class="left">
            <view class="icon-box">
              <text class="icon ri-settings-2-fill"></text>
            </view>
            <view class="title">修改密码</view>
          </view>
          <view class="right">
            <view class="arrow">
              <text class="icon ri-arrow-right-s-line"></text>
            </view>
          </view>
        </view>
			</view>
		</view>
	</view>
</template>

<script>
  import website from '@/utils/website.js'

	export default {
		data() {
			return {
        userInfo: {},
        defaultAvatar: '',
        authority: '',
			}
		},
    onShow() {
      const userInfo = uni.getStorageSync('userInfo')
      if (Object.keys(userInfo).length === 0 || userInfo === '') {
        uni.navigateTo({
          url: '/pages/my/login'
        })
      }
    },
		mounted() {
			this.load()
			this.$emit('loaded', {
				name: 'my'
			})
      this.userInfo = uni.getStorageSync('userInfo')
      this.defaultAvatar = website.defaultAvatar
		},
		methods: {
			load() {
        this.authority = uni.getStorageSync('authority')
				// console.log('my on load')
			},
      toLogin() {
        uni.navigateTo({
          url: '/pages/my/login'
        })
      },
      toOrder() {
        uni.navigateTo({
          url: '/pages/order/index'
        })
      },
      toResetPassword() {
        uni.navigateTo({
          url: '/pages/my/reset-password'
        })
      },
      logout() {
        uni.removeStorageSync('userInfo')
        uni.removeStorageSync('access_token')
        this.toLogin()
      }
		}
	}
</script>

<style lang="scss">
	.page {
		&>.top {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 78px 0 42px 0;
			margin-top: -70px;
			border-radius: 0 0 2em 2em;

			&>.avatar {
				&>.img {
					width: 108px;
					height: 108px;
					border-radius: 24px;
					//background-color: #E5AD8B;
				}
			}

			&>.name {
				margin-top: 24px;
				font-size: 17px;
				font-weight: 600;
			}

			&>.label {
				margin-top: 18px;
				font-size: 14px;
			}
		}

		&>.content {
			&>.list {
				padding: 0 28px;

				&>.item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 84px;
					margin-top: 18px;
					padding: 0 24px;
					// background-color: #FFFFFF;
					border-radius: 12px;

					&>.left {
						display: flex;
						align-items: center;

						&>.icon-box {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 38px;
							height: 48px;
							border-radius: 12px;

							&>.icon {
								font-size: 18px;
								color: #FFFFFF;
							}
						}

						&>.title {
							margin-left: 18px;
							font-size: 14px;
							font-weight: 600;
							color: #292929;
						}
					}

					&:nth-child(3n-2) {
						&>.left {
							&>.icon-box {
								background-color: #FFC592;
							}
						}
					}

					&:nth-child(3n-1) {
						&>.left {
							&>.icon-box {
								background-color: #F76842;
							}
						}
					}

					&:nth-child(3n) {
						&>.left {
							&>.icon-box {
								background-color: #61DAD5;
							}
						}
					}

					&>.right {
						display: flex;
						align-items: center;

						&>.arrow {
							display: flex;
							align-items: center;

							&>.icon {
								font-size: 18px;
								font-weight: 600;
								color: #9093A2;
							}
						}
					}
				}
			}
		}
	}
</style>
